Set up Responsive Layout Email Solution

Overview

The Responsive Layout (or no image map) solution for recommendations in email is the replacement for the old image map solution. This set of instructions helps you configure your email.

To learn more about recommendations in email and further information about email solutions, refer the Recommend Implementation Guide for Email.

Layout

Different email readers (such as Gmail, Outlook, and others) may read layouts in emails differently. To have recommendations presented in email consistently, a table layout with product information is used, as seen in the example below. This means that there will be a table format and inline CSS.

HTML: Header

(The Strategy Message goes here)

Copy

<html>
  <body style="margin: 0; padding: 0;">
    <div style="font-family: Arial,Helvetica,sans-serif !important; font-size:16px; font-weight: bold; margin:0; padding:0; width: 250px; text-align: center;">
    $STRATEGY_MESSAGE$
    </div>
  </body>
</html>

HTML: For each item

Copy

<table cellspacing="0" cellpadding="0" style="font-family: Arial,Helvetica,sans-serif; font-size: 15px; color: #000; border-collapse: collapse; border: 0; margin: 0 0 0 17px;">
  <tbody>
    <tr>
      <td>
      <table id="$EXTERNAL_ID$" width="180" cellspacing="0" cellpadding="0" style="width: 180px; margin: 0 10px 10px 0; text-align: center; border-collapse: separate; border-spacing: 0 3px;">
        <tbody>
          <tr>
            <td width="180" style="width: 180px;">
              <a href="$LINK_URL$" class="rrLink" target="_blank" conversion="true" width="180" style="width: 180px;">
                <img src="$IMAGE$" alt="" width="180" style="width: 180px; border: 0; margin: 0; display: block;" />
              </a>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle; text-align: center;">
              <table width="180" cellspacing="0" cellpadding="0" style="width: 180px; text-align: center; border-collapse: collapse; border: 0;">
                <tbody>
                  <tr>
                    <td width="180" style="width: 180px; text-align: center;">
                      <a href="$LINK_URL$" class="rrLink" target="_blank" conversion="true" style="text-decoration: none; display: block; margin-bottom: 10px; font-family: Arial,Helvetica,sans-serif; font-size: 15px; font-style: normal; color: #000; height: 37px; overflow: hidden; text-align: center;">
                        <span width="180" style="max-width: 180px; word-break: break-word;">$NAME$</span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 10px">
    </td>
  </tr>
</tbody>
</table>

HTML: Footer

(Just to remove the text decoration when hovering links)

Copy

<style>
  .rrLink:focus, .rrLink:hover {text-decoration: none;}
</style>

Placement

Once the layout is set up, create a placement for the layout, as you do for any other placement. For more information, see How to: Add, Publish, Delete Layouts.

HTML Page Sample

To create this sample page and test the layout, we will need to have the following information:

Parameter Name	Quick Info	Description	Examples
apiKey or a	API Key	The API key assigned to your web site by Algonomy. Each Algonomy partner has a unique API key that separates that partners data and traffic from other partners.	&a=[API_KEY]	Yes
userid or u	User ID	The unique User ID value that matches the site User ID.	&userid=12345	Yes
campaign or campaignid or cpi	Campaign ID	The unique name for the campaign that the merchant is setting up. This can be whatever the client wants, however, it must be unique.	&campaignId= order_confirmation or campaignId= Electronics PromoJuly2011	Yes
date	YYYY-MM-DD	Date the campaign is sent. Note: If sending multiple emails with the same userId parameter, you might see the same product recommendations even if the seed product ("productId") parameter is different. To avoid this, a format including the timestamp is recommended: date=2016-04-28-HHmmssmil (hour, minute, second, milisecond values too) By using this format, the date parameter will for all intents and purposes be unique each time an e-mail is sent, which will ensure that there will be no caching.	&date=2009-12-02	Yes
placement or pt	Placement	The name of the placement set up for this email. You can have multiple placements for different emails (for example, abandon-content). Note that the placement name does not have the page type.	&placement=responsive_rr	Yes
layout or ln or l	Layout name	The name of the layout set up for this email.	&layout=HTML-Email-Responsive	Yes
zoneName or pa	Look & Feel for ImageMaP	This is the name of the layout received from Algonomy	&zoneName=Vertical_3	Yes
slot	Product position for Responsive	Indicates the position of the product in the set of recommendations returned. Will be used for redirection to correct product page. It is only used on click links and the Strategy title has the value 0 (zero).	&slot=2	Yes
lid or rrIndex	Product position for ImageMap	Indicates the position of the product in the set of recs returned. Will be used for redirection to correct product page. Only used on click links.	&lid=2	Yes
version or rmv	Version (default=1)	Note that all the brand/category/strategy filter attributes defined below only work with Version 2	&version=2	No
region	Region	If your site uses regions, set this parameter to the name of the customer's region.	&region=pt-BR	No
bi	Block item ID	This option will force Recommend to NOT recommend specified products.	&bi=123\|234\|567	No
orderId or o	Order ID	The ID of an order if the email is related to an order.	&o=48958387	No
brandId or seedBrands or b	Brand ID	If the email refers to a specific brand, send the Brand ID. One or more brand IDs separated by a pipe	&seedBrand=65432\|98765	No
categoryId or seedCategoryIds or cis	Category ID	If the email refers to a specific category, send the category ID. One or more Category IDs separated by a pipe	&seedCategoryIds= 12345 or &seedCategory Ids=12345\|2345 \|67890	No
productId or seedProductIds or p	Product ID	If the email refers to a specific product, send the product ID. One or more Product IDs separated by a pipe. Note: The system de-duplicates between items identified as a seedProductIds.	&seedProductIds=123	No
st	Search Term	Specifies a search term that can be used by the SearchBought strategy family. Needs to be URL encoded.	&st=Harry%20Potter	No
strategySet	Filter Strategies	A prioritized list of strategy sets that you would want to be returned based on the campaign use case. Please see additional details under Strategy Families listing below. If this is not provided, our recommendation engine will run King of the Hill (KOTH) to provide best recommendations given the information provided. See list of available strategies below.	&strategySet=SiteWideBestSellers or &strategySet=ProductBoughtBought\| ProductViewedViewed	No
filbr	List of Brands	Lists of brands you want to act on. This parameter works in conjunction with filbrinc. Both must be setup correctly to get desired results.	&filbr=SONY\|Samsung	No
filbrinc	Include True/False	This flag allows you to show or remove the brands you provided under filbr. The default value is false, which would remove the specified brands.	&filbrinc=true	No
filcat	List of Categories	Lists of categories you want to act on. This parameter works in conjunction with filcatinc. Both must be setup correctly to get desired results. The category external ID (not category name) must be specified.	&filcat=TVS\| DVDS	No
filcatinc	Include True/False	This flag allows you to show or remove the categories you provided under filcat. The default value is false, which would remove the specified categories.	&flicatinc=true	No
filprmin	Price Min	This flag allows you to pass in a minimum price threshold. Note that this needs to be in cents.	&filprmin=2500	No
filprmax	Price Max	This flag allows you to pass in a maximum price threshold. Note that this needs to be in cents.	&filprmax=10000	No
filprinc	Include True/False	This flag allows you to include or remove products matching the minimum and maximum prices set using filprmin and filprmax. The default value is false.	&filprinc=true	No
ct	Click to, for ImageMap	Click URL to the product page. Needs to be URL encoded.	&ct=https%3A%2F%2Fwww.williams-sonoma.com%2Fproducts%2Fgreen-glass-shells%2F%3Frm%3Dt%26vg%3Dad8cc61d-9506-40cb-02d1-3058cb2da005	No
vg	View GUID	View GUID param	&vg=ad8cc61d-9506-40cb-02d1-3058cb2da005	No
additionalClickURLData	Additional Click URL Data	Additional parameters added by the merchant. Needs to be URL encoded.	&season=spring%20summer	No
engageSegmentId	Engage Segment	Engage segment ID. Numeric.	&engageSegmentId=1	No
emailRunId	Email Run Id	Email run Id.	&emailRunId=run1234	No
testMode or direct	Test mode	true/false	&testMode=true	No
devMode	Dev Mode	True/false. If "devMode=true" the caching mechanism will be bypassed	&devMode=true	No
lang	Language	Identify the language requested using the language code	&lang=sv-SE	No
sgs	Segment ID	Identify segments to be leveraged in an email	&sgs=3067	No
omitBackground	Include True	If you prefer to display images and text on a transparent background, meaning the background you define in the email template of your Email Service Provider (ESP), you can specify omitBackground as True. Note: In the email layout, you will need to configure 'background-color: transparent' or avoid setting the 'background-color' parameter.	&omitBackground=True	No
dedupWith	Specify the placements & layout names	This parameter allows you to specify which placement names and layout names should be included in the request when deduplicating the generated recommendations. For more details, refer to Deduplication of Email Recommendations.	&dedupWith=P1:L1\|P2:L2	No

With the parameters described, you can create the request URL and basically the ESP code will look like the code below. Note the variables on the URL, referring to the API Key, User ID, Campaign, and so on. This is how Algonomy's email server will gather the information needed and decide the strategy and products to return.

Copy

<!-- BEGIN code for Mailservice rendering recommendations, last edited 18/03/2015 -->
<div id="rrEmailTitle">
    <img id="rrImg0" src="http://image-int.richrelevance.com/rrmail/image/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=0" alt="Title" style="margin: 0px; padding: 0px; border: 0px;">
</div>
<div id="rrEmailProducts">
  <a id="rrLink1" href="http://image-int.richrelevance.com/rrmail/click/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=1">
      <img id="rrImg1" src="http://image-int.richrelevance.com/rrmail/image/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=1" alt="Image1">
  </a>
  <a id="rrLink2" href="http://image-int.richrelevance.com/rrmail/click/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=2">
      <img id="rrImg2" src="http://image-int.richrelevance.com/rrmail/image/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=2" alt="Image2">
  </a>
  <a id="rrLink3" href="http://image-int.richrelevance.com/rrmail/click/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=3">
      <img id="rrImg3" src="http://image-int.richrelevance.com/rrmail/image/recs?apiKey=636765f2f7284cd7&amp;userId=636765f2f7284cd7&amp;campaign=Test1&amp;date=2016-02-04&amp;placement=responsive_rr&amp;layout=HTML-Email-Responsive&amp;region=&amp;productId=&amp;categorId=&amp;orderId=&amp;brandId=&amp;slot=3" alt="Image3">
  </a>
</div>
<!-- END code for Mailservice -->

Note: image-int.richrelevance.com refers to the integration environment. When migrating to the production environment, Ensure to change the server to image.richrelevance.com.

Note: Algonomy caches the email HTML for 48 hours for each user, so if you make changes to the layout, you will need to change either the Campaign Name, the Campaign Date or the Target User to see the new modifications.

Debugging

To debug the layout created, you need to access the following link.

Note: Ensure to change the parameters between "<>" to get the layout needed for the client.

Copy

http://image-int.richrelevance.com/rrmail/image/recs/debug?apiKey=<api-key>&userId=<user-id>&campaign=<campaign-id>&date=<date>&placement=<placement>&layout=<layout>&slot=0

Integrate with ESP

Validate the layout and test with the ESP to check if the layout is working fine. Test with different email clients (such as Gmail, Yahoo, Outlook Web, and Outlook Desktop) to ensure the layout is not breaking.